<template>
	<view class="container">

		<!--view class="u-p-l-20 u-p-r-20">
			<view class="u-m-t-20">
				<u-alert type="warning" description="订单打印:请使用电脑打开https://i.yodin.com/maller.php,微信扫码登入后进行自动打印"></u-alert>
			</view>
		</view-->
		<u-empty text="没有订单"  mode="data"  icon="https://i.yodin.com/storage/empty/order.png" :show="flow_list.length === 0"  v-if="loadstatus == false" ></u-empty>
		
			<view v-for="(item, index) in flow_list" :key="index">
				<view  class="u-padding-20">
					<view class="u-flex">
						<view class="u-flex-4">
							<view class="u-font-sm">{{ item.add_time }}</view>
						</view>
						<view class="u-flex-2 price">{{ item.order_amount }}</view>
						<view class="u-font-lg u-success u-flex-middle">
							{{ item.order_status_txt }}
						</view>
					</view>
				
					<view class="b-b u-m-t-20"></view>
				
					<view class="u-p-t-20">
						<view class="u-p-b-20">
							{{ orderGoodsName(item.order_detailed) }}
						</view>
					
						<view class="u-flex u-flex-between">
							<view class="u-flex-2 u-p-r-10">
								<u-button type="primary"
								:disabled="item.order_status<=0||item.order_status>40?false:true"
								:type="item.order_status<=0||item.order_status>40?'error':'info'"
								plain size="mini"
								@click="deleteOrder(item.order_id)"
								text="删除"></u-button>
							</view>
							<view class="u-flex-2 u-p-r-10">
								<u-button type="primary" :disabled="(item.order_status==0||item.order_status==1)&&(item.pay_status==0)?false:true" plain size="mini" @click="editorder(item)" text="修改"></u-button>
							</view>
							<view class="u-flex-2 u-p-r-10">
								<u-button type="primary"
								:disabled="item.code_pay==1||item.code_pay==2||item.order_status==1||item.order_status==2||item.order_status==3||item.code_shipping==1||item.code_shipping==2||item.code_shipping==4||item.code_shipping==5?false:true"
								:type    ="item.code_pay==1||item.code_pay==2||item.order_status==1||item.order_status==2||item.order_status==3||item.code_shipping==1||item.code_shipping==2||item.code_shipping==4||item.code_shipping==5?'primary':'info'"
								plain size="mini" @click="goshipping(item)" text="物流"></u-button>
							</view>
							<view class="u-flex-2 u-p-r-10" v-if="1==2">
								<u-button
								:disabled="item.order_brokerage==1?false:true"
								:type="item.order_brokerage==1?'primary':'info'"
								plain size="mini" text="返利"></u-button>
							</view>
							<view class="u-flex-2">
								<u-button type="primary" plain size="mini" @click="operable_pop(item)" text="操作"></u-button>
							</view>
						</view>
					</view>
				
				</view>
				
				<u-gap height="6" bgColor="#F1F8FA"></u-gap>
			</view>
			
        <view v-if="flow_list.length > 0">
		  <u-loadmore nomoreText="End" color="#dddddd" marginBottom="50" marginTop="50" :status="loadStatus" @loadmore="getOrders" line></u-loadmore>
        </view>
		
		<u-popup :show="operablepop_show"  mode="center" closeOnClickOverlay @close="operablepop_show=false;" :customStyle="{width: '96%',padding:'6px 10px'}" :round="10">
			<view class="modal-content">
			
			<u--form label-position="left" label-width="40">
				<u-form-item class="form-item" label="订单" >
				  <u-radio-group v-model="operableOrderStatus" placement="row">
					<u-radio v-for="(oorder, index) in operableItem.order"
						:label="oorder.title"
						:key="index"
						:labelSize="14" :size="14"
						:customStyle="{marginRight: '16px'}"
						:name="oorder.value">
					</u-radio>
				  </u-radio-group>
				</u-form-item>
				<u-form-item class="form-item" label="支付">
				  <u-radio-group v-model="operablePayStatus" placement="row">
					<u-radio v-for="(oorder, index) in operableItem.pay"
						:label="oorder.title"
						:key="index"
						:labelSize="14" :size="14"
						:customStyle="{marginRight: '16px'}"
						:name="oorder.value">
					</u-radio>
				  </u-radio-group>
				</u-form-item>
				
				<u-form-item class="form-item" label="物流">
				  <u-radio-group v-model="operableShippingStatus" placement="row">
					<u-radio v-for="(oorder, index) in operableItem.shipping"
						:label="oorder.title"
						:key="index"
						:labelSize="14" :size="14"
						:customStyle="{marginRight: '16px'}"
						:name="oorder.value">
					</u-radio>
				  </u-radio-group>
				</u-form-item>
				<u-form-item  label="备注" prop="user_note">
					<u--input v-model="log_user_note" placeholder="请填写备注"  type="text"/>
				</u-form-item>
				<view class="u-flex u-flex-fill"><button type="primary" class="pay_btn u-m-b-20" size="mini" @tap="submitLog">提交</button></view>
				
			</u--form>

				<scroll-view scroll-y="true"  style="height: 360rpx;">
					<view class="" v-for="(log, index) in orderLog">
						<u-divider :text="$tools.dateFormat('YYYY-mm-dd HH:MM',log.add_time)" :dashed="true"></u-divider>

							 <!--log.add_time | timeStamp-->
							 <view>{{log.action_desc}} <text class="u-p-l-20" v-if="log.action_note!=''"> ㊟ {{log.action_note}} </text></view>
	
					</view>
				</scroll-view>
			</view>
		</u-popup>
		
		<u-popup :customStyle="{width: '96%',padding:'6px 10px'}" :round="10" :show="shippingPoP" @close="shippingPoP = false" mode="center" closeOnClickOverlay>
		   <view class="modal-content">
				
		<u--form labelWidth="70">
			<u-form-item label="收货人" :borderBottom="true">
				<u--input placeholder="" type="text" v-model="orderItem.consignee"></u--input>
			</u-form-item>
			<u-form-item label="联系手机" :borderBottom="true">
				<u--input placeholder="" type="text" v-model="orderItem.mobile"></u--input>
			</u-form-item>
			<u-form-item label="收货地址" :borderBottom="true">
				<u--input placeholder="" type="text" v-model="orderItem.address"></u--input>
			</u-form-item>

			<u-form-item label="快递公司" borderBottom @click="showkudi100()">
				<u--input
						v-model="orderItem.express_name"
						disabled
						disabledColor="#ffffff"
						placeholder="请选择"
						border="none"
				></u--input>
				<u-icon slot="right" name="arrow-right"></u-icon>
				<u-picker :show="showSelectKuaidi" :columns="kuaiducodelist" @confirm="kdSelect" @cancel="showSelectKuaidi = false" keyName="label"></u-picker>
			</u-form-item>

			<u-form-item label="快递单号" :borderBottom="true">
				<u--input placeholder="" type="text" v-model="orderItem.express_order"></u--input>
				<text slot="right" class="u-p-l-20">
					<u-icon name="iconfontsaoyisao"
						size="30"
						labelColor="#63E5CB"
						color="#63E5CB"
						custom-prefix="customicon">
					</u-icon>
				</text>
			</u-form-item>
		<u-gap height="20" ></u-gap>
		<view class="u-flex u-flex-fill">
			<view class="u-flex-5"><u-button type="info" size="large" @tap="clipboardcopy()">复制快递信息</u-button></view>
			<view class="u-flex-7 u-p-l-20"><u-button type="primary" size="large" @tap="savejisongkuaidi()">确认</u-button></view>
		</view>



				<u-divider text="快递100" :dashed="true"></u-divider>
				<view v-if="kd100path!=''">
				<!--#ifdef MP-WEIXIN-->
				<navigator target="miniProgram" open-type="navigate" app-id="wx6885acbedba59c14" :path="kd100path" extra-data="" version="release">查看快递信息</navigator>
				<!--#endif-->
				<!--#ifdef H5-->
					<u-button type="info" size="mini"
					 @click="$tools.goJump('/pagesPackageA/info/webview',{url:kd100h5path},'','')">查看快递信息</u-button>
				<!--#endif-->
				</view>


		<u-gap height="10" ></u-gap>
		</u--form>
				
		   	</view>
		</u-popup>
		<u-popup :customStyle="{width: '96%',padding:'6px 10px'}" :round="10" :show="editorderPoP" @close="editorderPoP = false" mode="center" closeOnClickOverlay>
		   <view class="modal-content">
				
		<u--form labelWidth="70">
			<u-form-item label="收货人">
				<u--input placeholder="" type="text" v-model="orderItem.consignee"></u--input>
			</u-form-item>
			<u-form-item label="联系手机">
				<u--input placeholder="" type="text" v-model="orderItem.mobile"></u--input>
			</u-form-item>
			<u-form-item label="收货地址" :borderBottom="true">
				<u--input placeholder="" type="text" v-model="orderItem.address"></u--input>
			</u-form-item>
			
			<u-form-item label="订单总价">
				<u--input placeholder="" type="text" v-model="orderItem.order_amount"></u--input>
			</u-form-item>
<!-- 			<u-form-item label="包装费">
				<u--input placeholder="" type="text" v-model="orderItem.mobile"></u--input>
			</u-form-item> -->
			<u-form-item label="配送费">
				<u--input placeholder="" type="text" v-model="orderItem.shipping_fee"></u--input>
			</u-form-item>
			
		<u-gap height="20" ></u-gap>
		<u-button type="primary" size="large" @tap="savejisongkuaidi()">修改订单信息</u-button>

		<u-gap height="10" ></u-gap>
		</u--form>
				
		   	</view>
		</u-popup>
		
	</view>
</template>

<script>
	import { api_order_list,api_order_view,api_order_kdcode,api_order_edit,api_order_log_add,api_order_del } from '@/config/api.js';
	
	export default {
		data() {
			return {
				page: 1,
				pageSize: 5,
				flow_list: [],
				orderItem:[],
				loadstatus:false,
				loadStatus: 'loadmore',
				shop_id:'',
				operablepop_show:false,
				operableItem:[],
				operableOrderStatus:'0',
				operableShippingStatus:'0',
				operablePayStatus:'0',
				orderLog:[],
				log_user_note:'',
				logOrderid:'',
				shippingPoP:false,
				editorderPoP:false,
				showSelectKuaidi:false,
				kuaiducodelist:[],
				kd100path:'',
				kd100h5path:''
			}
		},
		computed: {
			orderGoodsName() {
				return (order_detailed) => {
					let arr = []
					order_detailed.forEach(order_detailed => arr.push(order_detailed.goods_name + ' '+order_detailed.property+' * ' + order_detailed.num))
					return arr.join('，')
				}
			}
		},
		async onLoad(options) {
			this.shop_id = options.shop_id;
			await this.getOrders(false)
		},
		async onReachBottom() {
			await this.getOrders(false)
		},
		async onPullDownRefresh() {
			await this.getOrders(true)
		},
		methods: {
			async getOrders(isRefresh = false) {
				let orders = await this.getOrderList();
			},
		goshipping(order){
			this.shippingPoP=true;
			this.orderItem = {
				order_id:order.order_id,
				consignee:order.consignee,
				mobile:order.mobile,
				address:order.address,
				express_order:order.express_order,
				express_name:order.express_name,
				express_code:order.express_code,
				order_detailed:order.order_detailed
			}
			if (this.orderItem.express_order!=''){
				this.kd100path="pages/result/result?nu="+this.orderItem.express_order+"&com="+this.orderItem.express_code+"&querysource=third_xcx"
				this.kd100h5path="https://m.kuaidi100.com/app/query/?com="+this.orderItem.express_code+"&nu="+this.orderItem.express_order+"&coname="
			}
			
			// console.log(this.orderItem)
			// this.$api("order.order_getkuaidi100", {
			//   express_code:this.orderItem.express_code,
			//   express_order:this.orderItem.express_order
			// }).then((res) => {
			// 	console.log(res);
			// 	if (res.code == 200) {
			// 	  this.kd100List = res.data;
			// 	}
			//   }).catch((e) => {});
		}, 
		editorder(order){
			this.editorderPoP=true;
			this.orderItem = {
				order_id:order.order_id,
				consignee:order.consignee,
				mobile:order.mobile,
				address:order.address,
				order_amount:order.order_amount,
				shipping_fee:order.shipping_fee
			}
		},
		showkudi100(){
			this.showSelectKuaidi = true;uni.hideKeyboard();
		},
		kdSelect(e){
				console.log(e)
				this.showSelectKuaidi=false
				this.orderItem.express_name = e.value[0].label
				this.orderItem.express_code = e.value[0].express_code
		},
		clipboardcopy() {
		  let that = this;
		  let detailed=this.orderGoodsName(this.orderItem.order_detailed);
		  let ordercopyInfo = this.orderItem.express_name+this.orderItem.express_order+'\r'+this.orderItem.address+" "+this.orderItem.mobile+" "+this.orderItem.consignee+" \r "+detailed;
		  uni.setClipboardData({
			data: ordercopyInfo,
			success: function (data) {
			  that.$u.toast("快递信息已复制成功");
			},
			fail: function (err) {},
			complete: function (res) {},
		  });
		},
		savejisongkuaidi(){
			console.log(this.orderItem)
			api_order_edit(this.orderItem).then((res) => {
				console.log(res);
				  this.editorderPoP=false;
				  this.shippingPoP=false;
						this.page=1;
						this.flow_list=[];
						this.getOrderList();
			  }).catch((e) => {});
		},
		submitLog(){
				api_order_log_add({
					order_id:this.logOrderid,
					order_status:this.operableOrderStatus,
					pay_status:this.operablePayStatus,
					shipping_status:this.operableShippingStatus,
					user_note:this.log_user_note
				}).then(res => {
						this.page=1;
						this.flow_list=[];
						this.getOrderList();
						this.operablepop_show=false
						this.log_user_note=''
				}).catch((e)=>{});
		},
		operable_pop(order){
			this.logOrderid=order.order_id
			this.operablepop_show=true
			this.operableItem=order.operableItem
			console.log(order)
			this.operableOrderStatus=order.order_status
			this.operablePayStatus=order.pay_status
			this.operableShippingStatus=order.shipping_status
			this.orderLog=order.log

		},
		deleteOrder(id){
			api_order_del({
					order_id:id
				}).then(res => {
						this.page=1;
						this.flow_list=[];
						this.getOrderList();
				}).catch((e)=>{});
		},
		// 页面数据
		getOrderList() {
				api_order_kdcode({}).then(res => {
					this.kuaiducodelist[0] = res;
					console.log(this.kuaiducodelist)
				}).catch((e)=>{});
			    api_order_list({
					shop_id:this.shop_id
				}).then(res => {
					console.log(res)
					if (res.count > 0) {
						if (this.page <= res.pages) {
							res.list.map((item) => {
								this.flow_list.push(item);
							})
							if (this.page==res.pages)this.loadStatus = "nomore";
						  this.page += 1;
						} else {
						  this.loadStatus = "nomore";
						}
					}
                }).catch((e)=>{});
		},

			goToInvoice() {
				uni.navigateTo({
					url: '/pages/componentsC/invoice/invoice'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page,body{
		height: 100%;
	}
</style>
